<template>
  <uni-popup background-color="#fff" ref="filterPop" @change="popChange">
    <view class="input-pop">
      <view class="header">
        <text>筛选</text>
        <uni-icons class="close-icon" @click="closePop" type="closeempty" size="40rpx" color="#CCCCCC" />
      </view>
      <view class="conent-wrap">
        <view class="main">
          <view class="items">
            <view class="label">煤矿</view>
            <view class="select-wrap" :style="{
                color: filterInput.collieryName.length ? '#333' : '#808080'
              }" @click="chooseCotype">
              {{
              filterInput.collieryName.length
              ? collieryNameText
              : '请选择煤源'
              }}
            </view>
          </view>
          <view class="items">
            <view class="label">煤种</view>
            <view class="select-wrap" :style="{
                color: filterInput.coalName.length ? '#333' : '#808080'
              }" @click="chooseComine">
              {{ filterInput.coalName.length ? coalNameText : '请选择煤种' }}
            </view>
          </view>
          <view class="items">
            <view class="label">热值</view>
            <view class="items-input">
              <input type="digit" class="short" v-model="filterInput.calorificValueStart" placeholder="请输入热值起始值" />
              <text class="middle-icon"> ~ </text>
              <input type="digit" class="short" v-model="filterInput.calorificValueEnd" placeholder="请输入热值结束值" />
            </view>
          </view>
          <view class="items">
            <view class="label">硫份</view>
            <view class="items-input">
              <input type="digit" class="short" v-model="filterInput.sulfurStart" placeholder="请输入硫份起始值" />
              <text class="middle-icon"> ~ </text>
              <input type="digit" class="short" v-model="filterInput.sulfurEnd" placeholder="请输入硫份结束值" />
            </view>
          </view>
        </view>
        <view class="footer">
          <button class="cancel" plain @click="resetFilter()">重置</button>
          <button plain type="primary" @click="confirmFilter()">确认</button>
        </view>
        <scroll-view class="scroll-view" scroll-y="true" v-if="chooseCollieryFlag">
          <view class="search-box">
            <uni-easyinput suffixIcon="search" v-model="searchColliery" placeholder="请输入"></uni-easyinput>
          </view>
          <view class="scroll-main">
            <view :key="index" class="scroll-view-item" @click="collieryClickItem(item)"
              :class="{ 'active-item': item.checked }" v-for="(item, index) in collieryFilterList">
              <view>{{ item.collieryName }}</view>
              <view class="checked-icon" v-if="item.checked">√</view>
            </view>
          </view>
          <view class="scroll-footer">
            <button class="cancel" plain size="mini" @click="cancleColliery">
              取消
            </button>
            <button plain size="mini" type="primary" @click="confirmColliery">
              确定
            </button>
          </view>
        </scroll-view>
        <scroll-view class="scroll-view" scroll-y="true" v-if="chooseComineFlag">
          <view class="search-box">
            <uni-easyinput suffixIcon="search" v-model="searchCoal" placeholder="请输入"></uni-easyinput>
          </view>
          <view class="scroll-main">
            <view :key="index" class="scroll-view-item" @click="coalClickItem(item)"
              :class="{ 'active-item': item.checked }" v-for="(item, index) in coalFilterList">
              <view>{{ item.coalName }}</view>
              <view class="checked-icon" v-if="item.checked">√</view>
            </view>
          </view>
          <view class="scroll-footer">
            <button class="cancel" plain size="mini" @click="canclecoal">
              取消
            </button>
            <button plain size="mini" type="primary" @click="confirmcoal">
              确定
            </button>
          </view>
        </scroll-view>
      </view>
    </view>
  </uni-popup>
</template>
<script>
  import { toast } from '@/utils/common';
  import { getCollieryComineLists } from '@/api/analysis.js';
  export default {
    props: {
      show: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      async show(flag) {
        if (flag) {
          this.resetFilter();
          this.collieryLists = [];
          this.getCollieryComineLists();
          this.$refs.filterPop?.open('bottom');
          return;
        }
        this.$refs.filterPop?.close();
      }
    },
    computed: {
      collieryNameText() {
        return this.filterInput.collieryName.join(',');
      },
      coalNameText() {
        return this.filterInput.coalName.join(',');
      },
      collieryFilterList() {
        return this.collieryLists.filter(e => e.collieryName.includes(this.searchColliery))
      },
      coalFilterList() {
        return this.coalNameLists.filter(e => e.coalName.includes(this.searchCoal))
      }
    },
    data() {
      return {
        chooseCollieryFlag: false,
        chooseComineFlag: false,
        collieryLists: [],
        coalNameLists: [],
        confirmCoalList: [],
        confirmCollieryList: [],
        filterInput: {
          collieryName: [],
          coalName: [],
          calorificValueStart: undefined,
          calorificValueEnd: undefined,
          sulfurStart: undefined,
          sulfurEnd: undefined
        },
        searchColliery: '',
        searchCoal: ''

      };
    },
    methods: {
      popChange(data) {
        this.$emit('openChange', {
          key: 'isOpenFilterBox',
          show: data.show
        });
      },
      closePop() {
        this.$refs.filterPop?.close();
      },
      resetFilter() {
        this.coalNameLists = [];
        this.chooseCollieryFlag = false;
        this.chooseComineFlag = false;
        this.filterInput = {
          collieryName: [],
          coalName: [],
          calorificValueStart: undefined,
          calorificValueEnd: undefined,
          sulfurStart: undefined,
          sulfurEnd: undefined
        };
        this.collieryLists = this.setListsChecked(this.collieryLists)
      },
      chooseCotype() {
        if (this.collieryLists.length == 0) {
          toast('煤源列表暂时为空');
          return;
        }
        this.chooseCollieryFlag = true;
      },
      chooseComine() {
        if (this.coalNameLists.length == 0) {
          toast('请选择煤源');
          return;
        }
        this.chooseComineFlag = true;
      },
      collieryClickItem(item) {
        item.checked = !item.checked;
        if (item.checked) {
          this.filterInput.collieryName.push(item.collieryId);
          return;
        }
        const index = this.filterInput.collieryName.indexOf(item.collieryId);
        if (index !== -1) {
          this.filterInput.collieryName.splice(index, 1);
        }
      },
      coalClickItem(item) {
        item.checked = !item.checked;
        if (item.checked) {
          if (this.filterInput.coalName.length < 5) {
            this.filterInput.coalName.push(item.coalId);
          } else {
            item.checked = false;
            toast('煤种最多只能选择5个');
          }
          return;
        }
        const index = this.filterInput.coalName.indexOf(item.coalId);
        if (index !== -1) {
          this.filterInput.coalName.splice(index, 1);
        }
      },
      cancleColliery() {
        this.recoverCollieryListsChecked();
        this.chooseCollieryFlag = false;
      },
      confirmColliery() {
        this.chooseCollieryFlag = false;
        this.coalNameLists = [];
        this.filterInput.coalName = [];
        const coalList = this.collieryLists
          .filter((e) => e.checked)
          .map((m) => m.coalList);
        this.coalNameLists = coalList.flat(Infinity);
        this.confirmCollieryList = JSON.parse(
          JSON.stringify(this.filterInput.collieryName)
        );
        this.coalNameLists = this.setListsChecked(this.coalNameLists)
      },
      canclecoal() {
        this.recoverCoalNameListsChecked();
        this.chooseComineFlag = false;
      },
      confirmcoal() {
        this.confirmCoalList = JSON.parse(
          JSON.stringify(this.filterInput.coalName)
        );
        this.chooseComineFlag = false;
      },
      confirmFilter() {
        const data = JSON.parse(
          JSON.stringify(this.filterInput)
        )
        this.$emit('loadTable', data);
        this.$refs.filterPop?.close();
      },
      async getCollieryComineLists() {
        const res = await getCollieryComineLists();
        if (res.code === 0) {
          this.collieryLists = res?.data || [];
          this.collieryLists = this.setListsChecked(this.collieryLists)
        } else {
          toast(res.msg);
        }
      },
      setListsChecked(list) {
        return list.map((e) => {
          e.checked = false;
          return e;
        });
      },
      recoverCoalNameListsChecked() {
        this.filterInput.coalName = JSON.parse(
          JSON.stringify(this.confirmCoalList)
        );
        this.coalNameLists = this.coalNameLists.map((e) => {
          if (this.confirmCoalList.includes(e.coalName)) {
            e.checked = true;
          } else {
            e.checked = false;
          }
          return e;
        });
      },
      recoverCollieryListsChecked() {
        this.filterInput.collieryName = JSON.parse(
          JSON.stringify(this.confirmCollieryList)
        );
        this.collieryLists = this.collieryLists.map((e) => {
          if (this.confirmCollieryList.includes(e.collieryName)) {
            e.checked = true;
          } else {
            e.checked = false;
          }
          return e;
        });
      }
    }
  };
</script>
<style lang="scss" scoped>
  .input-pop {
    .conent-wrap {
      display: flex;
      flex-direction: column;
      position: relative;
      max-height: 80vh;
    }

    .header {
      position: relative;
      padding: 12px 20px;
      text-align: center;
      border-bottom: 1px solid #eaeaea;

      .close-icon {
        position: absolute;
        right: 20px;
      }

      text {
        font-size: 15px;
        font-weight: bold;
      }
    }

    .main {
      padding: 20px 20px 0 20px;
      flex: 1;
      height: 0;
      overflow-y: auto;
    }

    .footer {
      padding: 12px 20px 0 20px;
      display: flex;
      justify-content: space-between;
    }

    button {
      width: 45%;
      margin-top: 10px;
      height: 40px !important;
      font-size: 16px !important;
      line-height: 40px !important;
    }

    button.cancel {
      border: 0 !important;
      color: #666666 !important;
      background-color: #eeeff2 !important;
    }
  }

  .scroll-view {
    position: absolute;
    padding: 10px 20px;
    width: 100%;
    height: 100%;
    z-index: 9;
    top: 0;
    background-color: #fff;

    .scroll-view-item+.scroll-view-item {
      margin-top: 6px;
    }

    .search-box {
      margin-bottom: 13px;
    }

    .scroll-view-item {
      display: flex;
      justify-content: space-between;
      padding: 8px 10px;
      border-radius: 4px;
      background-color: #f2f6fc;

      .checked-icon {
        font-size: 14px;
        font-weight: bold;
      }
    }

    .scroll-main {
      height: 240px;
      overflow-y: auto;
    }

    .scroll-footer {
      display: flex;
      justify-content: space-between;
    }
  }

  .active-item {
    color: #fff !important;
    background-color: #409eff !important;
  }

  .items {
    margin-bottom: 10px;

    .middle-icon {
      padding: 0 4px;
    }

    .label {
      width: 107px;
      margin-bottom: 4px;
      display: flex;
      align-items: center;

      >text {
        color: red;
      }
    }

    .items-input {
      display: flex;
      align-items: center;
      justify-content: start;
    }

    input {
      flex: 1;
      height: 40px;
      color: #999;
      line-height: 40px;
      border-radius: 4px;
      padding: 5rpx 10rpx;
      border: 1px solid #e5e5e5;
    }

    .select-wrap {
      flex: 1;
      height: 40px;
      padding: 0 5px;
      color: #808080;
      line-height: 40px;
      border-radius: 4px;
      border: 1px solid #e5e5e5;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .address-box {
      display: flex;
      flex: 1;

      button {
        width: 36%;
        margin-left: 10px;
      }
    }

    button {
      margin-top: 0 !important;
    }
  }
</style>